<!-- 
 用户信息页面。
 这里应该具备以下功能
 1. 显示头像。头像有点击事件，跳转到一个页面，这里的逻辑，之前已经有了，暂时未关注。
 2. 显示用户昵称，
 3. 显示用户的角色。如果是一个 非 普通用户 ，则点击的时候，还有其他动作。需要弹出一个框出来，列举他的角色。这里应该单独做为一个组件。
 4. 
 -->
<template>
	<widget-root :styles="styles" :class="themeName">
		<view class="user-info flex-col" :style="[infoStyle]">
			<view class="user-top flex-1">
				<view class="flex" v-if="isLogin">
					<router-link to="/pagesUser/pages/user_set/user_set">
						<image class="icon-avatar" v-if="userInfo.avatar" :src="userInfo.avatar" />
						<image class="icon-avatar" src="../../../static/images/headimgurl1.jpg" v-else></image>
					</router-link>
					<view class="m-l-30 flex-1">
						<view class="xxl white display-flex col-center"  v-if="userInfo.nickname" style="">
							<text>{{ userInfo.nickname }}</text>
							<!-- start 这里显示的是 用户角色。例如：普通会员 -->
							<!-- <userInfoRoleVue style="margin-left: 20rpx;"></userInfoRoleVue> -->
							<!-- end 用户角色 -->
						
							<!-- start 会员等级如果是普通用户，则需要一个激活功能。应该是通过 level 来判断 userInfoDistributionLevel.weights == 1 -->
							<activateInfluencersVue style="margin-left: 20rpx;" v-if="false">激活</activateInfluencersVue>
							<!-- end 会员等级  -->
							<image src="/static/img/Home/qiehuan1.png" class="imgis" @click="changes" v-if="false"></image>
							
							<!-- start 消息中心或者通知 -->
							<router-link to="/bundle/pages/message_center/message_center" v-if="false">
								<view class="m-l-24 display-flex">
									<u-icon name="/static/images/icon_notice.png" size="40" ></u-icon>
									<!-- <view class="set_text">通知</view> -->
								</view>
							</router-link>
							<!-- end 消息中心 -->
                            
                            <view class="icon_set smll">
                                <view class="mr10" @click="gotoPage('/pagesUser/pages/message/index')" v-if="false">
                                    <u-icon name="/pagesUser/static/images/icon_notice.png" size="48" @click=""></u-icon>
                                    <view class="set_text">通知</view>
                                </view>
                                <view>
                                    <u-icon name="/static/images/icon_set.png" size="48"
                                        @click="gotoPage('/pagesUser/pages/user_profile/user_profile')"></u-icon>
                                    <view class="set_text">设置</view>
                                </view>
                            </view>
						</view>
						<!-- <view class="xs black" style="margin-top: 10rpx;">
							<text class="label">邀请码:</text>
							<text class="value" style="margin-left: 10rpx;">{{userInfo.code}}</text>
							<text class="xs copy-btn2 m-l-5" @tap.stop="$copy(userInfo.code)">复制</text>
						</view>
						<view class="xs black" v-if="userInfoFirstLeaderInfo.nickname">
							<text class="label" >推荐导师:</text>
							<text class="value" style="margin-left: 10rpx;">{{ userInfoFirstLeaderInfo.nickname }}</text>
						</view> -->
						<!-- <view class="flex user-id m-t-10" v-if="userInfo.sn && content.show_user_sn">
							<view class="xs m-r-20 white">会员ID: {{userInfo.sn}}</view>
							<view class="xs copy-btn m-l-5" @tap.stop="$copy(userInfo.sn)">复制</view>
						</view> -->
					</view>
				</view>
				
				<router-link v-else to="/pages/login/login">
					<view class="flex white">
						<image class="icon-avatar"
							:src="content.avatar_type==2 && content.avatar ? $getImageUri(content.avatar) : require('@/static/images/icon_portrait.png') "
							mode="" />
						<view class="m-l-20 flex-1">
							<view class="xxl">
								点击登录
							</view>
							<view class="xs">登录体验更多功能</view>
						</view>
					</view>
				</router-link>
			</view>
			
			<!-- S 资产 -->
			<userInfoAssetsVue :content="content" :styles="styles"></userInfoAssetsVue>
			<!-- E 资产 -->
			
			<!-- start vip 会员功能，从芒播那边抠过来的。暂时不用，先隐藏 -->
			<sensitizeVipVue v-if="false"></sensitizeVipVue>
			<!-- end vip 会员功能，从芒播那边抠过来的。暂时不用，先隐藏 -->
			
			<!-- start 普通会员这块 先隐藏 , 根据 content.show_member 控制显示隐藏，目前的需求，是不需要这个功能 -->
			<leverMerberVue v-if="false" ></leverMerberVue>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	import sensitizeVipVue from './components/sensitize-vip.vue';
	import leverMerberVue from './components/lever-merber.vue';
	import userInfoAssetsVue from './components/user-info-assets.vue';
	import activateInfluencersVue from './components/activate-influencers.vue';
	import userInfoRoleVue from './components/user-info-role.vue';
	export default {
		components: {
			sensitizeVipVue,
			leverMerberVue,
			userInfoAssetsVue,
			activateInfluencersVue,
			userInfoRoleVue
		},
		props: {
			content: {
				type: Object
			},
			styles: {
				type: Object
			},
			percent: {
				type: Number,
				default: 0
			},
			title: {
				type: String,
				default: "个人中心"
			}
		},
		data() {
			return {
				
			}
		},
		computed: {
			userInfoFirstLeaderInfo() {
				if (this.userInfo && this.userInfo.first_leader_info && typeof this.userInfo.first_leader_info === 'object') {
					return this.userInfo.first_leader_info
				}
				return {}
			},
			userInfoDistributionLevel() {
				if (this.userInfo && this.userInfo.distribution_level && typeof this.userInfo.distribution_level === 'object') {
					return this.userInfo.distribution_level
				}
				return {}
				
			},
			showAssets() {
				return (type) => {
					return this.content.assets.includes(type)
				}
			},
			infoStyle() {
				const {
					background_image,
					background_type
				} = this.content
				if (!background_image || background_type == 1) {
					return {}
				}
				return {
					'background-image': `url(${this.$getImageUri(this.content.background_image)})`,
				}
			},
			navaWrapStyle () {
				const styles =  this.styles
				// padding: `${styles.padding_top}px ${styles.padding_horizontal}px ${styles.padding_bottom}px`,
				//     'background-color': styles.root_bg_color
				return {
					'padding_top': styles.nav_padding_top,
					'padding_bottom': styles.nav_padding_bottom,
					'padding_horizontal': styles.nav_padding_horizontal,
					'background-color': styles.nav_root_bg_color
				
				}
			},
			navaStyle (){
				const styles = this.styles
				const border_radius_top = styles.nav_border_radius_top * 2
				const border_radius_bottom = styles.nav_border_radius_bottom * 2
				const radius = `${border_radius_top}rpx ${border_radius_top}rpx ${border_radius_bottom}rpx ${border_radius_bottom}rpx`
				return {
					'background-color': this.styles.nav_bg_color,
					'border-radius': radius
				}
			}
   
		},
		methods: {
			changes(){
				uni.navigateTo({
					url:'/pagesUser/pages/user/accountSwitch'
				})
			},
            gotoPage(url) {
                uni.navigateTo({
                	url: url
                })
            }
		},
	};
</script>

<style lang="scss" scoped>
	.user-info {
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;

		.user-top {
            position: relative;
			padding: 0 30rpx;
			// #ifdef  H5
			padding-top: 70rpx;

			// #endif
			.icon-avatar {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				border: 1px solid #f8f8f8;
			}
			.copy-btn2 {
				padding: 6rpx 20rpx;
				border-radius: 20rpx;
				background: #fff;
				border: 1rpx solid #ddd;
				font-size: 20rpx;
			}

			.user-id {
				display: inline-flex;
				border: 1px solid #fff;
				border-radius: 100rpx;
				padding-left: 20rpx;

				.copy-btn {
					padding: 3rpx 20rpx;
					border-radius: 20rpx;
					background: #fff;
					
				}
			}
            .icon_set {
            	position: absolute;
            
            	top: 50rpx;
                /* #ifdef h5 */
                top: 90rpx;
                /* #endif */
            	right: 20rpx;
                display: flex;
                flex-direction: row;
            
            	.set_text {
            		font-size: 22rpx;
            		color: #FFFFFF;
            		margin-top: -10rpx;
            	}
            }
		}

		.imgis{
			width: 45rpx;
			height: 45rpx;
			margin-left: 15rpx;
		}
		.set_text {
			font-size: 22rpx;
			color: #FFFFFF;
			margin-top: -10rpx;
		}
		
	}
</style>

